import Vue from 'vue'
import store from '../store'

import { imageIsExist } from '@/utils/index.js'

// 图片地址处理
Vue.directive('real-img', async function(el, binding) {
  const value = binding.value || ''// 获取图片地址
  const defaultImg = require('assets/common/404.png')
  if (value) {
    const imgURL = value.replace(/salescmscdn.pa18.com/g, 'pss-esales-cms.paic.com.cn').replace(/test-stg1-salescms-paids.pa18.com/g, 'pss-esales-cms-nginx-bx-stg1-web-padis.paic.com.cn').replace(/test-stg2-salescms-paids.pa18.com/g, 'pss-esales-cms-nginx-bx-stg2-web-padis.paic.com.cn')
    const exist = await imageIsExist(imgURL)
    el.setAttribute('src', exist ? imgURL : defaultImg)
  }
})
Vue.directive('drap-move', async function(el) {
  el.onmousedown = e => {
    e.preventDefault()
    // 算出鼠标相对元素的位置
    const disX = e.clientX - el.offsetLeft
    const disY = e.clientY - el.offsetTop
    document.onmousemove = e => {
      // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
      const left = e.clientX - disX
      const top = e.clientY - disY
      // 移动当前元素
      el.style.left = left + 'px'
      el.style.top = top + 'px'
    }
    document.onmouseup = e => {
      // 鼠标弹起来的时候不再移动
      document.onmousemove = null
      // 预防鼠标弹起来后还会循环（即预防鼠标放上去的时候还会移动）
      document.onmouseup = null
    }
  }
})
Vue.directive('zoom', async function(el) {
  el.onclick = e => {
    e.preventDefault()
    store.dispatch('app/updateSrc', e.target.src)
  }
})
// 版本验证
Vue.directive('hValue', async function(el, binding, vNode) {
  let content
  // 按键按下=>只允许输入 数字/小数点/减号
  el.addEventListener('keypress', event => {
    const e = event || window.event
    const inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode)
    const re = /\d|\.|-/
    content = e.target.value
    // 定义方法,阻止输入
    function preventInput() {
      if (e.preventDefault) {
        e.preventDefault()
      } else {
        e.returnValue = false
      }
    }
    if (!re.test(inputKey) && !e.ctrlKey) {
      preventInput()
    } else if (content.indexOf('.') > 0 && inputKey === '.') {
      // 已有小数点,再次输入小数点
      preventInput()
    }
  })
  // 失去焦点=>保留指定位小数
  // el.addEventListener('focusout', event => {
  //   const e = event || window.event
  //   content = e.target.value
  //   if (content.indexOf('.') !== -1) {
  //     e.target.value = content.substr(0, content.indexOf('.') + 4)
  //   }
  // 会卡
  // vNode.componentInstance.$emit('input', e.target.value)
  // })
})

// 校验数字
Vue.directive('hNumber', async function(el, binding) {
  // 按键按下=>只允许输入 数字
  el.addEventListener('keypress', event => {
    const e = event || window.event
    const inputKey = String.fromCharCode(typeof e.charCode === 'number' ? e.charCode : e.keyCode)
    const re = /\d|-/
    // 定义方法,阻止输入
    function preventInput() {
      if (e.preventDefault) {
        e.preventDefault()
      } else {
        e.returnValue = false
      }
    }
    if (!re.test(inputKey) && !e.ctrlKey) {
      preventInput()
    }
  })
})
